<template>
  <!-- 左边聊天框 -->
  <div
    v-if="props.position == 1"
    class="chatbox"
    id="left"
  >
    <el-avatar
      shape="square"
      class="head"
      :src="HeadSrc"
    ></el-avatar>

    <text
      class="chatContext"
      
      v-html="props.message"
    ></text>

  </div>
  <!-- 右边聊天框 -->
  <div
    v-if="props.position == 2"
    class="chatbox"
    id="right"
  >
    <el-avatar
      shape="square"
      class="head"
      :src="UserSrc"
    ></el-avatar>

    <text class="chatContext">{{ props.message }}</text>

  </div>

</template>

<script setup>
import { defineProps, onMounted } from "vue";
const HeadSrc =
  "https://typora-1312299359.cos.ap-beijing-1.myqcloud.com/icon/bitLogo.jpg";
const UserSrc =
  "https://typora-1312299359.cos.ap-beijing-1.myqcloud.com/icon/bitLogo2.jpg";
const props = defineProps({
  position: String,
  message: String,
});
onMounted(() => {
});
</script>

<style scoped>
.chatbox {
  width: 100%;
  margin-top: 10px;
  display: flex;
}
.head {
  margin: 5px 10px;
  width: 40px;
  height: 40px;
}
.chatContext {
  margin: 7px 10px;
  background-color: rgba(83, 83, 83, 0.5);
  border-radius: 10px;
  padding: 5px 10px;
  resize: none;
  max-width: 80%;
}
#right {
  flex-direction: row-reverse;
}
@media screen and (max-width: 600px) {
  * {
    font-size: 10px;
  }
  .chatbox {
    margin-top: 5px;
  }
  .head {
    width: 30px;
    height: 30px;
    margin: 3px 2px;
  }
  .chatContext {
    margin: 5px 5px;
  }
}
</style>